import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Header from '../../components/Header/Header'
import { reqgetcate,reqgetgoods } from '../../http/api'
import { $pre } from '../../http/http'
import { filterPrice } from '../../filters';
import './Cate.less'
export default class Cate extends Component {
  constructor() {
    super()
    this.state = {
      getcate: [],
      getgoods:[]
    }
  }
  componentDidMount() {
    this.getcate()
    this.getgoods(1)
  }

  async getcate() {
    let res = await reqgetcate();
    if (res.data.code == 200) {
      this.setState({
        getcate: res.data.list ? res.data.list : []
      })
    }
  }

  async getgoods(fid) {
    let res = await reqgetgoods({fid});
    if (res.data.code == 200) {
      this.setState({
        getgoods: res.data.list ? res.data.list : []
      })
    }
  }

  toDetail(id){
    this.props.history.push('/detail/'+id)
  }

  render() {
    let { getcate,getgoods,n } = this.state;
    return (
      <div>
        <Header title='分类'></Header>
        {/* Link 没有activeClassName属性 ，NavLink有*/}
        <Link to={'/search'}>Link前往搜索</Link>
        <button onClick={() => {
          this.props.history.push('/search')
        }}>push搜索</button>
        <button onClick={() => {
          this.props.history.replace('/search')
        }}>replace搜索</button>
        <div className='wrap'>
          <div className='left'>
            {getcate.map((item,index)=>{
              return <li key={item.id} className={index == n ?'active':''} onClick={()=>this.getgoods()}>
                {item.catename}
              </li>
            })}
          </div>
          <div className='right'>
            {getgoods.map((item)=>{
              return <div key={item.id} onClick={()=>this.toDetail(item.id)}>
                <img src={$pre+item.img} alt="" />
                <div className='name'>name:{item.goodsname}</div>
                <div>价格：{filterPrice(item.price)}</div>
                <div>市场价格：{filterPrice(item.market_price)}</div>
              </div>    
            })}
          </div>

        </div>
      </div>
    )
  }
}
